import { Select, ConfigProvider } from "antd";
import selectArrow from "@/assets/theme/select-arrow.png";
import selectArrowLight from "@/assets/theme/select-arrow-light.png";
import styles from "./index.module.scss";
import { useSelector } from "react-redux";

export default function SelectCu(props) {
  const { width, options, placeholder } = props;
  const theme = useSelector((state) => state.theme);
  const handleChange = (value) => {
    props.getSelectValue(value);
  };
  return (
    <ConfigProvider
      theme={{
        cssVar: true,
        components: {
          Select: {
            paddingSM: 26,
            colorTextPlaceholder: "#757575",
            colorText: theme ? "black" : "#ffffff",
            algorithm: false,
            primaryShadow: "0px 0px 12px rgba(0, 0, 0, 0)",
            hoverBorderColor: "transparent",
            activeBorderColor: "transparent",
            colorBorder: "transparent",
            colorBgElevated: theme
              ? "rgba(44, 155, 234, 1)"
              : "rgb(20, 31, 57)",
            optionSelectedBg: "#1677ff",
            colorBgContainer: "transparent",
            controlOutlineWidth: "0",
          },
        },
      }}
    >
      <div className={styles.selectBox} style={{ width }}>
        <Select
          allowClear
          showSearch
          optionFilterProp="label"
          style={{
            height: 38,
            width: "100%",
          }}
          placeholder={placeholder ? placeholder : "入离职类型"}
          suffixIcon={
            <img
              style={{ width: 14, height: 14 }}
              src={theme ? selectArrowLight : selectArrow}
              alt="加载中..."
            />
          }
          onChange={handleChange}
          options={options}
        />
      </div>
    </ConfigProvider>
  );
}
